<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../style/cake.css"/>
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="cake_app">
        <div class="head_title">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="../page/firstIndex.html">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="margin-bottom: 20px;">
            <el-input
                    style="width: 15%;"
                    class="Search_input"
                    placeholder="请输入名称"
                    v-model="input"
                    clearable>
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="searchBtn" class="searchBtn">搜索</el-button>
            <el-button  type="success" style="margin-right: 70px" class="addBtn" @click="addPage">添加</el-button>
        </div>
        <div>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            type="index"
                            align="center"
                            label="序号"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            align="center"
                            label="名称"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="image"
                            align="center"
                            label="缩略图"
                            width="180">
                        <template slot-scope="scope">
                            <el-image v-if="scope.row.image" style="width: auto;height: 50px" :src="scope.row.image[0]?scope.row.image[0]:''"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            align="center"
                            label="价格"
                            width="80">
                        <template slot-scope="scope">
                        ￥{{scope.row.price}}元
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            align="center"
                            label="剩余数量"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            align="center"
                            label="类别"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            align="center"
                            width="220"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            width="80"
                            align="center"
                            label="状态">
                        <template slot-scope="scope">
                            {{String(scope.row.status)=='1'?"售卖中":"停售中"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  align="center" width="320">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="EditInfo(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="warning"
                                    @click="handleEdit(scope.$index, scope.row)">{{ String(scope.row.status) === '0' ? '启售' : '停售' }}</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[2, 5, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total=totalSize>
                </el-pagination>
            </div>
        </div>
    </div>
    <script src="../plugin/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../plugin/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugin/axios/axios.min.js"></script>
    <script src="../js/cake.js"></script>
    <script>
        let app = new Vue({
            el:"#cake_app",
            data() {
                return {
                    tableData: [{
                        name:'',
                        categoryName:'',
                        image:[],
                        price:0,
                        number:0,
                        createTime:'',
                        status:0
                    }],
                    page:1,
                    pageSize:2,
                    totalSize:0,
                    input:''
                }
            },
            created(){
              this.init()
            },
            methods: {
                async init(){
                    let res = await getPage(this.page,this.pageSize,this.input)
                    this.tableData = res.data.data.records
                    console.log(res.data.data)
                    this.totalSize=res.data.data.total
                },
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                EditInfo(index,row){
                    let id=row.id
                    window.location.href="../page/addCake.html?titleFlag=false&id="+id
                },
                async handleEdit(index,row){
                    let id=row.id
                    let status =row.status?0:1
                    let images = row.image
                    this.$confirm('确定调整该状态, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        let res = await editStatus({'id':id,'status':status,'image':images})
                        console.log(res)
                        if(res.data.code==1){
                            this.$message({
                                type: 'success',
                                message: '更新成功!'
                            });
                            this.init()
                        }else{
                            this.$message({
                                type: 'warning',
                                message: '系统错误!'
                            });
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '操作已取消'
                        });
                    });
                },
                async handleDelete(index,row){
                    let id=row.id


                    this.$confirm('确定删除该商品, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        let res = await deleteApi(id)
                        console.log(res.data)
                        if(res.data.code==1){
                            this.$message({
                                type: 'success',
                                message: res.data.data
                            });
                            this.init()
                        }else if(res.data.code==0){
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        } else{
                            this.$message({
                                type: 'warning',
                                message: '系统错误!'
                            });
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '操作已取消'
                        });
                    });



                },
                searchBtn(){
                    this.init()
                },
                addPage(){
                    window.location.href="../page/addCake.html"
                },
                handleSizeChange(val){
                    this.pageSize=val
                    this.init()
                },
                handleCurrentChange(val){
                    this.page=val
                    this.init()
                }
            }
        })
    </script>
</body>
</html>